<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  <!-- 
    什么是指令？
      答：指令本质是对DOM操作的封装。
    什么是自定义指令？
      答：vue帮我们内置了很多的指令，也可以允许自定义指令。也是把一些常用的DOM操作进行封装，封装成自定义指令。

    自定义指令的目的：复用  
       我们讲的很多内容都是复用技巧：组件，mixin，自定义指令，原型链，插件，过滤器。

    自定义全局指令：Vue.direactive("指令名",{}/fn)   在任意组件中都可以使用自定义全局指令。
    自定义局部指令：通过direactive选项来自定义局部指令的。只能在当前组件有效

    面试题：
      1）常用的指令有哪些？你是怎么理解指令？
      2）在工作中是否封装过指令？ 水印指令，权限指令，拖拽指令....
    
    推荐8个常用指令（项目经验）：
      https://zhuanlan.zhihu.com/p/337659611
      https://juejin.cn/post/6906028995133833230

    
   -->
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>
    <!-- <input type="text" v-mlmodel="name"> -->
    <!-- <input type="text" v-mlmodel.lazy="name"> -->
    <!-- <input type="text" v-mlmodel.trim="name"> -->
    <!-- <input type="text" v-mlmodel.upper="name"> -->
    <input type="text" v-mlmodel.number="name">
  </div>

  <script>
    Vue.directive("mlmodel", {
      bind(el, binding, vnode) {
        console.log("binding:", binding);
        console.log("vnode:", vnode);

        let { expression, modifiers, value } = binding;
        let { context } = vnode;
        let { lazy, trim, upper, number } = modifiers;
        console.log(lazy, trim, upper, number);

        // el.value = value
        el.value = context[expression]

        el.addEventListener(lazy ? 'change' : 'input', function (e) {
          let val = e.target.value;
          if (trim) val = val.trim();
          if (number) val = parseFloat(val);
          if (upper) val = val.toUpperCase();

          context[expression] = val;
        })
      }
    })
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          vc: "gold"
        }
      },
    });
  </script>
</body>

</html>